<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - 9, shape.y - 9]
            const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
    });
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
            const c4 = [shape.x + 18, shape.y - 9]
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    });
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + 18, shape.y - 9];
            const c3 = [shape.x + 9, shape.y - 18];
            const c4 = [shape.x - 9, shape.y - 9];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
        }
    });
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);
    let option = {
        backgroundColor: "#012366",
        title: {
            text: 'TITLE',
            top: 32,
            left: 'center',
            textStyle: {
                color: '#00F6FF',
                fontSize: 24
            }
        },
        grid: {
            left: 20,
            right: 40,
            bottom: '19%',
            top: 107,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'white'
                }
            },
            offset: 20,
            axisTick: {
                show: false,
                length: 9,
                alignWithLabel: true,
                lineStyle: {
                    color: '#7DFFFD'
                }
            },
            axisLabel: {
                fontSize: 16
            }
        },
        yAxis: {
            type: 'value',
            name: '',
            nameTextStyle: {
                color: '#fff',
                fontSize: 16
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'white'
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 16
            },
            boundaryGap: ['20%', '20%']
        },
        series: [{
            type: 'custom',
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                    type: 'group',
                    children: [{
                        type: 'CubeLeft',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                                {
                                    offset: 1,
                                    color: '#49BEE5'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeRight',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                                {
                                    offset: 1,
                                    color: '#49BEE5'
                                }
                            ])
                        }
                    }, {
                        type: 'CubeTop',
                        shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3B80E2'
                            },
                                {
                                    offset: 1,
                                    color: '#49BEE5'
                                }
                            ])
                        }
                    }]
                }
            },
            data: []
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/bar/one/1',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                if(Array.isArray(option.xAxis)) {
                    result.data.xAxis.forEach(function (item, index) {
                        option.xAxis[index].data = item.data;
                        option.xAxis[index].type = item.type;
                        if (item.name) {
                            option.xAxis[index].name = item.name;
                        }
                    });
                }else {
                    let item = result.data.xAxis[0];
                    option.xAxis.data = item.data;
                    option.xAxis.type = item.type;
                    if (item.name) {
                        option.xAxis.name = item.name;
                    }
                }

                if(Array.isArray(option.yAxis)) {
                    result.data.yAxis.forEach(function (item, index) {
                        option.yAxis[index].type = item.type;
                        option.yAxis[index].name = item.name;
                        if (item.data) {
                            option.yAxis[index].data = item.data;
                        }
                    });
                }else {
                    let item = result.data.yAxis[0];
                    option.yAxis.type = item.type;
                    option.yAxis.name = item.name;
                    if (item.data) {
                        option.yAxis.data = item.data;
                    }
                }
                result.data.series.forEach(function (item, index) {
                    option.series[index].data = item.data;
                });

                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
